<template>
    <div class="newsSwiper">
      <div class="newsSwiper-container"  v-show="isShow">
          <div class="swiper-wrapper">
             <div class="swiper-slide"  v-for="(item,index) in swiper" @click="intoNewInfo(item.id)">
                <div class="swiper-new">
                   <div class="newBox">
                       <div class="animalPhoto">
                          <img v-bind:src="item.cover">
                       </div>
                       <div class="newsText">
                          <p class="newTime">{{item.updated_at}}</p>
                          <div class="textBox">
                              <p class="textTitle">
                                {{item.title}}
                              </p>
                              <span class="textInfo">
                                {{item.introduction}}
                              </span>
                          </div>
<!--                           <p class="getMore" @click="intoNewInfo">
                              <a>{{$t('contact.knowMore')}}</a>
                          </p> -->
                       </div>              
                   </div>
                </div>
             </div>
          </div>
          <div class="buttonBox">
             <div class="prev"></div>
             <div class="next"></div>
          </div>
         <div class="swiper-pagination"></div>
      </div>        
    </div>
</template>
<script>
// @import Swiper from '../../static/swiper.min.js'
// 
import Loading from '@/components/loading'
export default {
  name: "newsSwiper",
  components:{
     Loading
  },  
  data () {
    return {
        name:'我要测试首页',
        url:'/api/news?is_push=1',
        swiper:[],
        isShow:false
    }
  },
  watch: {
    swiper: function() {
        this.$nextTick(function(){
            var swiper = new Swiper('.newsSwiper-container', {  
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
                dynamicBullets: true,
              },
              navigation: {
                nextEl: '.next',
                prevEl: '.prev',
              }
            });            
        })
    }
  },
  methods: {
      getSlider () {
        this.$loading(this.$t("contact.loading"));
        let self = this;
        axios.get(self.url)
            .then(function (response) {
               if(response.data.data == undefined || response.data.data.length <= 0 ){
                   self.isShow = false;
               }else{
                  self.isShow = true;
                  self.swiper = response.data.data;
               }
               self.closeLoading();
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            })           
      },
      intoNewInfo(brand_id){
          this.$router.push({
             path: '/newView',
             query: {
                 id: brand_id
             }
          })        
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.getSlider();
  } 
};
</script>
<style scoped>
 @import "../assets/css/newsSwiper.css";
</style>